<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui的导航</title>
    <!--引入layui的核心css文件-->
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <!--layui的核心js文件（采用模块化引入）-->
    <script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
  <!--选项卡的默认风格-->
  <div class="layui-tab">
    <ul class="layui-tab-title">
      <li class="layui-this">网站设置</li>
      <li>用户管理</li>
      <li>权限分配</li>
      <li>商品管理</li>
      <li>订单管理</li>
    </ul>
    <div class="layui-tab-content">
      <div class="layui-tab-item layui-show">内容1</div>
      <div class="layui-tab-item">内容2</div>
      <div class="layui-tab-item">内容3</div>
      <div class="layui-tab-item">内容4</div>
      <div class="layui-tab-item">内容5</div>
    </div>
  </div>

   <!--选项卡的简洁风格-->
   <div class="layui-tab layui-tab-brief">
    <ul class="layui-tab-title">
      <li class="layui-this">网站设置</li>
      <li>用户管理</li>
      <li>权限分配</li>
      <li>商品管理</li>
      <li>订单管理</li>
    </ul>
    <div class="layui-tab-content">
      <div class="layui-tab-item layui-show">内容1</div>
      <div class="layui-tab-item">内容2</div>
      <div class="layui-tab-item">内容3</div>
      <div class="layui-tab-item">内容4</div>
      <div class="layui-tab-item">内容5</div>
    </div>
  </div>

     <!--选项卡的卡片风格-->
     <div class="layui-tab layui-tab-card">
      <ul class="layui-tab-title">
        <li class="layui-this">网站设置</li>
        <li>用户管理</li>
        <li>权限分配</li>
        <li>商品管理</li>
        <li>订单管理</li>
      </ul>
      <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">内容1</div>
        <div class="layui-tab-item">内容2</div>
        <div class="layui-tab-item">内容3</div>
        <div class="layui-tab-item">内容4</div>
        <div class="layui-tab-item">内容5</div>
      </div>
    </div>

         <!--选项卡的卡片风格--带删除属性--->
         <div class="layui-tab layui-tab-card" lay-allowClose="true">
          <ul class="layui-tab-title">
            <li class="layui-this">网站设置</li>
            <li>用户管理</li>
            <li>权限分配</li>
            <li>商品管理</li>
            <li>订单管理</li>
          </ul>
          <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">内容1</div>
            <div class="layui-tab-item">内容2</div>
            <div class="layui-tab-item">内容3</div>
            <div class="layui-tab-item">内容4</div>
            <div class="layui-tab-item">内容5</div>
          </div>
        </div>

<script>
 
  layui.use('element',function(){
    var element=layui.element;
  });

</script>
</body>

</html>